import { useEffect } from 'react';
import { Button, Input, Form } from 'antd';
import CommonModal from '@/components/CommonModal';
import '../index.less';

const { TextArea } = Input;

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const ContractStop = ({ stopVisible, handleOk, handleCancel }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
  }, [stopVisible]);

  //提交
  const onOk = () => {
    form
      .validateFields()
      .then((value) => {
        handleOk(value);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  //取消
  const onCancel = () => {
    handleCancel();
  };

  return (
    <CommonModal
      title="到期终止"
      visible={stopVisible}
      footer={[
        <Button onClick={onCancel} key="cancel">
          取消
        </Button>,
        <Button onClick={onOk} key="confirm" type="primary">
          确定
        </Button>,
      ]}
      onCancel={onCancel}
      width={500}
    >
      <Form
        {...layout}
        form={form}
        name="store-factory-list-search"
        // className="search-form-style"
        style={{ marginBottom: '16px' }}
        // onFinish={onFinish}
      >
        <Form.Item
          label="终止原因"
          name="closeMessage"
          rules={[{ required: true, message: '请输入终止原因!' }]}
        >
          <TextArea autoSize={{ minRows: 4, maxRows: 6 }} maxLength={200} />
        </Form.Item>
      </Form>
    </CommonModal>
  );
};

export default ContractStop;
